<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>名创优品官方商城</title>
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"> 
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
	</head>
	<body>
		<!-- 头部 -->
			<div class="header">
				
			</div>
		<div class="x-login">
			<div class="x-main">
				<div class="board">
					<p>账号登录</p>
					
						<div class="x-input x-pb12">
							<div class="phone x-Licon"></div>
							<input class="x-left" type="text" placeholder="手机号码(11位)" name="uname" id="Login">
						</div>
						<div class="x-input">
							<div class="lock x-Licon"></div>
							<input class="x-left" type="password" placeholder="输入密码( 6-16 位数字和字母)" name="password" id="Pass">
						</div>
						<div id="tip1" style="color: red; font-size: 12px;"></div>
						<div id="tip2" style="color: red; font-size: 12px;"></div>
						<div id="tip3" style="color: red; font-size: 12px;"></div>
						<button class="x-redBtn" id="submit-btn">登录</button>
					
					<div class="etc">
						<a href="#">忘记密码&nbsp;?</a>
						<a class="x-flr" href="registered.html">注册</a>
					</div>
					<div class="loginThirdParty">
						<a href="#"><img src="img/登录/weixin.png"><span>微信</span></a>
					</div>
				</div>
			</div>
		</div>
	
		<!-- 底部 -->
				<div class="tail1"></div>
		<!-- 尾部 -->
				<div class="tail2"></div>
	</body>
</html>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript">
	// 引入头部
	$(".header").load("header.html", function() {});
	// 引入尾部
	$(".tail1").load("tail1.html", function() {});
	$(".tail2").load("tail2.html", function() {});
	
	$(".x-left").click(function(){
		$(this).css({border:"0.5px solid #999"})
	})
	$(".x-left").blur(function(){
		$(this).css({border:"1px solid #ddd"})
	})
	
	
	
	let flag = false;
	$("#Login").blur(function(){
		let  reg = /^\d{11}$/;
		if(!reg.test(this.value)){
			$("#tip1").html("请输入正确手机号");
			flag = false;
		}else{
			$("#tip1").html("手机号正确");
			flag = true;
		}
	})
	
	$("#Pass").blur(function(){
		let  reg = 	/^\w{6,16}$/;
		if(!reg.test(this.value)){
			$("#tip2").html("请输入正确格式密码");
			flag = false;
		}else{
			$("#tip2").html("密码格式正确");
			flag = true;
		}
	})
	
	$("#submit-btn").click(function(){
		console.log(111);
		if(flag){
		$.ajax({
			type:"POST",
			url:"login.php",
			data:"phone="+$("#Login").val(),
			success:(msg)=>{
				if(msg){
					$("#tip3").html("登录成功,请点击<a href='first.html'>首页</a>");
					
				}else{
					$("#tip3").html("该用户不存在，请先注册");
				}
			}
		})
		}
	})
	
	
	
</script>
